// src/components/popups/sponsorTable/sponsorTableFilter/Filter.tsx

import { useState } from "react";
import { IoClose } from "react-icons/io5";
import FromYearToYear from "@/components/popups/sponsorTable/sponsorTableFilter/FromYearToYear";
import Program from "@/components/popups/sponsorTable/sponsorTableFilter/Program";
import Faculty from "@/components/popups/sponsorTable/sponsorTableFilter/Faculty";
import CoopProgram from "@/components/popups/sponsorTable/sponsorTableFilter/CoopProgram";
import Status from "@/components/popups/sponsorTable/sponsorTableFilter/Status";

interface FilterProps {
  onClose: () => void;
  onApply: (filters: {
    fromYear: string;
    toYear: string;
    selectedPrograms: string[];
    selectedFaculties: string[];
    selectedCoopPrograms: string[];
    selectedStatus: string;
  }) => void;
}

const Filter = ({ onClose, onApply }: FilterProps) => {
  const [fromYear, setFromYear] = useState("");
  const [toYear, setToYear] = useState("");
  const [selectedPrograms, setSelectedPrograms] = useState<string[]>([]);
  const [selectedFaculties, setSelectedFaculties] = useState<string[]>([]);
  const [selectedCoopPrograms, setSelectedCoopPrograms] = useState<string[]>([]);
  const [selectedStatus, setSelectedStatus] = useState<string>("All");

  const handleClear = () => {
    setFromYear("");
    setToYear("");
    setSelectedPrograms([]);
    setSelectedFaculties([]);
    setSelectedCoopPrograms([]);
    setSelectedStatus("All");
  };

  const handleApply = () => {
    onApply({
      fromYear,
      toYear,
      selectedPrograms,
      selectedFaculties,
      selectedCoopPrograms,
      selectedStatus,
    });
    onClose();
  };

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 dark:bg-black/80 backdrop-blur-sm px-4 font-poppins animate-fade-in"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-md rounded-3xl bg-white dark:bg-slate-900 px-6 py-8 shadow-2xl dark:shadow-blue-900 border border-gray-200 dark:border-slate-800 animate-fade-in-up transition-all duration-300"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Close button */}
        <button
          onClick={onClose}
          className="absolute top-5 right-5 text-gray-400 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-300 transition"
        >
          <IoClose size={22} />
        </button>

        {/* Title */}
        <h2 className="text-2xl font-bold text-center text-blue-700 dark:text-cyan-300 mb-6">
          Filter Options
        </h2>

        {/* Filter Fields */}
        <div className="space-y-5">
          <FromYearToYear
            fromYear={fromYear}
            toYear={toYear}
            setFromYear={setFromYear}
            setToYear={setToYear}
          />
          <Program
            selectedPrograms={selectedPrograms}
            setSelectedPrograms={setSelectedPrograms}
          />
          <Faculty
            selectedFaculties={selectedFaculties}
            setSelectedFaculties={setSelectedFaculties}
          />
          <CoopProgram
            selectedCoopPrograms={selectedCoopPrograms}
            setSelectedCoopPrograms={setSelectedCoopPrograms}
          />
          <Status
            selectedStatus={selectedStatus}
            setSelectedStatus={setSelectedStatus}
          />
        </div>

        {/* Action Buttons */}
        <div className="mt-8 flex justify-between items-center">
          <button
            onClick={handleClear}
            className="px-4 py-2 rounded-xl border border-gray-300 dark:border-slate-700 text-gray-600 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-slate-800 transition text-sm"
          >
            Clear Filters
          </button>
          <button
            onClick={handleApply}
            className="px-5 py-2 rounded-xl bg-blue-600 dark:bg-cyan-700 text-white hover:bg-blue-700 dark:hover:bg-cyan-800 transition shadow text-sm font-semibold"
          >
            Search
          </button>
        </div>
      </div>
    </div>
  );
};

export default Filter;